<script setup lang="ts" name="BpmnDrawerEvents">
import { useModelerStore } from '@/store/bpmnProcess/modelerStore'

const filterKey = ref('')
const list = ref([])
const result = ref([])
const initData = () => {
  const eventBus = useModelerStore().getModeler.get('eventBus')
  console.log(eventBus, '事件列表')
  filterKey.value = ''
  list.value = Object.keys(eventBus._listeners).sort()
  list.value.forEach((item) => {
    result.value.push({ key: item })
  })
}

const filterChange = () => {
  result.value = []
  const res = list.value.filter((key) => key.includes(filterKey.value))
  res.forEach((item) => {
    result.value.push({ key: item })
  })
}

defineExpose({ initData })
</script>

<template>
  <div class="events flex-1">
    <div class="search-form">
      <el-input v-model="filterKey" placeholder="请输入关键词" @input="filterChange"></el-input>
    </div>
    <div class="flex-1 table-layout">
      <div class="table-wrap">
        <el-table :data="result" border>
          <el-table-column type="index" width="50" />
          <el-table-column prop="key" label="事件" />
        </el-table>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
.events {
  display: flex;
  flex-direction: column;
}

.table-layout {
  position: relative;
  display: flex;
  flex: 1;

  .table-wrap {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;

    .el-table {
      width: 100%;
      height: 100%;
    }
  }
}
</style>
